<template>
	<cover-view class="content">
		<cover-view class="dialog">
			<cover-view id="colorBg" class="colorBg" @touchstart="startTouch" @touchmove="moveIng" @touchend="endTouch">

				<cover-image class="bg" src="/static/colorPalette.png"></cover-image>
				<cover-view class="roundBuff" :catchtouchmove="true" @c.stop="()=>{}"
					:style="{transform:`rotate(${degrees}deg)`,backgroundColor: `hsl(${degrees},50%,50%)`}">
				</cover-view>
				<!-- <cover-view  class="colorPan" >{{'RGB:'+rgbColor}}</cover-view > -->
			</cover-view>
			<!-- 	<cover-view  class="flex" style="margin-top: 100rpx;">
				<button class="lee_btn" type="default">取消</button>
				<button class="lee_btn" type="default">确认</button>
			</cover-view > -->
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		data() {
			return {
				pointerShow: true,
				colorPanWidth: 20,
				colorPanRadius: 0,
				pointerBox: {},
				degrees: 0
			}
		},
		mounted() {


	
				uni.getSystemInfo({
					success: (res) => {
						uni.createSelectorQuery().in(this).select('#colorBg').boundingClientRect((
							rect) => {
								this.pointerBox = rect
							}).exec()
						this.colorPanRadius = res.screenWidth * 0.4
					}
				})


		},
		methods: {
			startTouch(e) {
				const {
					pageX,
					pageY
				} = e.touches[0]
				this.rotatePointer(pageX, pageY)
			},
			endTouch(e) {
				const {
					pageX,
					pageY
				} = e.changedTouches[0]
				this.rotatePointer(pageX, pageY)
			},
			moveIng(e) {
				const {
					pageX,
					pageY
				} = e.touches[0]
				this.rotatePointer(pageX, pageY)
			},
			rotatePointer(pageX = 0, pageY = 0) {
				const {
					pointerBox,
					colorPanWidth
				} = this
				const mouseX = pageX - colorPanWidth
				const mouseY = pageY - colorPanWidth
				var centerY = pointerBox.top + (pointerBox.height / 2) - 0,
					centerX = pointerBox.left + (pointerBox.height / 2) - 0,
					radians = Math.atan2(mouseX - centerX, mouseY - centerY)

				this.degrees = (radians * (180 / Math.PI) * -1) + 180;
				let rgbColor = this.functionhslToRgb(this.degrees / 360)
     this.$emit('setColor',rgbColor)


			},

			functionhslToRgb(h, s = 0.5, l = 0.5) {
				var r, g, b;

				if (s == 0) {
					r = g = b = l; // achromatic
				} else {
					var hue2rgb = function hue2rgb(p, q, t) {
						if (t < 0) t += 1;
						if (t > 1) t -= 1;
						if (t < 1 / 6) return p + (q - p) * 6 * t;
						if (t < 1 / 2) return q;
						if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
						return p;
					}

					var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
					var p = 2 * l - q;
					r = hue2rgb(p, q, h + 1 / 3);
					g = hue2rgb(p, q, h);
					b = hue2rgb(p, q, h - 1 / 3);
				}

				return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
			}
		}
	}
</script>

<style>
	.dialog {
		display: block;
		border-radius: 30rpx;
		/* background-color: ch; */
		/* 		margin: 20rpx;
		padding: 30rpx; */
		/* transform: scale(2); */
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.colorBg {
		width: calc(300vmin / 7.5);
		height: calc(300vmin / 7.5);
		/* margin: 5vw; */
		/* 		background: repeating-conic-gradient(red,
				yellow,
				lime,
				aqua,
				blue,
				fuchsia,
				red); */
		/* background-color: red; */
		border-radius: 50%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.roundBuff {
		width: calc(150vmin / 7.5);
		height: calc(150vmin / 7.5);
		-webkit-transform-origin: center 50%;
		transform-origin: center 50%;
		background: #303030;
		border-radius: 50%;
	}

	.roundBuff::before {
		content: "";
		width: 15px;
		height: 15px;
		background: #303030;
		border: solid #303030;
		border-width: 10px 10px 0 0;
		transform: translate(-50%, -50%) rotate(-45deg);
		position: absolute;
		left: 50%;
		top: calc(0vmin / 7.5);
	}

	.lee_btn {
		background: #00000000;
		color: #FFFFFF;
		width: 36%;
		height: 80rpx;
		line-height: 70rpx;
		text-align: center;
		justify-content: center;
		font-size: 30rpx;
		border-radius: 50rpx;
		border: 5rpx #FFFFFF solid;
		font-weight: bold;
		padding: 1px 20px;
	}

	.colorPan {
		position: absolute;
		color: #FFFFFF;
	}
</style>
